<template>
   <div>
      <!-- navbar -->
      <MyNavBar></MyNavBar>

      <ul>
         <li
            class="cinema"
            v-for="{ cinemaId, name, address, lowPrice, Distance } in cinemas"
            :key="cinemaId">
            <div class="left">
               <p class="name">{{ name }}</p>
               <p class="address">{{ address }}</p>
            </div>

            <div class="right">
               <p class="price">
                  <span>￥{{ lowPrice / 100 + "起" }}</span>
               </p>
               <p class="distance">{{ Distance.toFixed(2) + "km" }}</p>
            </div>
         </li>
      </ul>
   </div>
</template>

<script>
import { getCinemas } from "@api/movieApi";

import MyNavBar from "@components/MyNavBar.vue";

export default {
   components: {
      MyNavBar,
   },
   /* 定义组件的数据闭包 */
   data() {
      return {
         cinemas: [],
      };
   },

   /* 组件挂载时获取到影院数据 */
   mounted() {
      getCinemas().then(cinemas => (this.cinemas = cinemas));
   },
};
</script>

<style lang="scss" scoped>
@import "@assets/variable.scss";
.title {
   text-align: center;
}
li.cinema {
   display: flex;
   align-items: center;
   height: 70px;
   border-bottom: 1px solid #eee;
   padding: 0 1rem;

   div.left {
      flex-grow: 4;

      p.name,
      p.address {
         @include singleLineElipsis(18rem);
      }

      p.name {
         font-size: 1rem;
         margin-bottom: 0.5rem;
      }

      p.address {
         font-size: 0.7rem;
         color: #999;
         font-style: italic;
      }
   }

   div.right {
      flex-grow: 1;

      p {
         text-align: center;
      }

      p.price {
         margin-bottom: 0.5rem;
         font-size: 0.8rem;

         span {
            font-size: 0.75rem;
            font-style: italic;
            font-weight: 400;
            color: $myOrange;
            display: inline-block;
            min-width: 60px;
         }
      }

      p.distance {
         font-size: 0.75rem;
         color: #999;
      }
   }
}
</style>
